<%--
  Created by IntelliJ IDEA.
  User: BluceYoung
  Date: 2020/12/16
  Time: 18:33
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="../temp/index_head.jsp">
    <jsp:param name="title" value="社团搜索"/>
    <jsp:param name="needTable" value="true"/>
</jsp:include>
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_title">
            <h2>社团搜索 <small>different form elements</small></h2>
            <div class="clearfix"></div>
        </div>
        <div class="x_content">
            <div class="row">
                <div class="col-md-12">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="clubId">社团编号</label>
                            <input type="text" class="form-control" id="clubId" >
                        </div>
                        <div class="form-group">
                            <label for="clubName">社团名称</label>
                            <input type="text" class="form-control" id="clubName" >
                        </div>
                        <div class="form-group">
                            <label for="clubName">社团分类</label>
                            <select id="clubType"  class="form-control" required="">
                                <option value="0">全部</option>
                                <c:forEach items="${types}" var="type">
                                    <option  value="${type.id}">${type.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                        <button type="button" onclick="search()" class="btn btn-default">搜索</button>
                    </form>
                </div>
            </div>
            <div class="row">
                <table
                        id="table"
                        data-toggle="table"  <%--不写js代码自动激活bt--%>
                        data-pagination="true" <%--使用分页--%>
                        data-side-pagination="server" <%--使用服务端进行分页--%>
                        data-sort-name="c.id" <%--排序列--%>
                        data-sort-order="desc" <%--排序的方式--%>
                        data-query-params-type=""
                        data-method="post" <%--post提交--%>
                        data-content-type="application/x-www-form-urlencoded"  <%--正常传递json--%>
                        data-ajax="ajaxRequest" <%--发送请求的处理函数--%>
                        data-page-size="2"    <%--每页条数--%>
                        data-page-list="[2]"  <%--可选的每页条数--%>
                        data-url="${pageContext.request.contextPath}/club/list.json"  <%--数据获取的地址--%>
                >
                    <thead>
                    <tr>
                        <th data-field="" data-formatter="rowNumber">序号</th>
                        <th data-field="name" data-sortable="true" data-sort-name="convert(c.`name` using gbk)" data-formatter="rowClubName">社团名称</th>
                        <th data-field="user.nickName" data-formatter="rowNickName">社长</th>
                        <th data-field="clubType.name">分类</th>
                        <th data-field="createTime">创建日期</th>
                        <th data-field="id">社团id</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<jsp:include page="../temp/index_foot.jsp">
    <jsp:param name="needTable" value="true"/>
</jsp:include>
<script type="text/javascript">
    function rowNumber(value, row, index) {
        var options = $('#table').bootstrapTable('getOptions');
        return options.pageSize * (options.pageNumber - 1) + index + 1;
    }

    function rowNickName(value,row,index){
        return "<a target='_blank' href='${pageContext.request.contextPath}/user/profile/"+row.user.id+"'>"+value+"</a>" ;
    }

    function rowClubName(value,row,index){
        return "<a target='_blank' href='${pageContext.request.contextPath}/club/info/"+row.id+"'>"+value+"</a>" ;
    }

    //在需要的时候，bt会调用此函数进行请求发送
    function ajaxRequest(params){
        //params.data里存储的就是2个排序信息，2个分页信息
        //发起一个请求，读取数据
        console.log(params.data)
        var club={};
        club.id=$("#clubId").val().trim();
        club.name=$("#clubName").val().trim();
        if($("#clubType").val()>0){
            var type={"id":$("#clubType").val()}
            club.clubType=type;
        }
        params.data.obj=club;
        $.ajax({
            url: params.url,//访问原设置的请求地址
            data: JSON.stringify(params.data),
            type: "POST",
            contentType: "application/json",//复杂类型以json对象传入控制器
            dataType: "json",
            success: function (data) {//data的格式：{total:2,rows:[{},{}]}
                params.success(data);
            }
        })



    }

    function search(){
        $("#table").bootstrapTable('refresh')
    }
</script>

